<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>录入自定义页面</title>

    <!-- 引入 css -->
    <link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
    <!-- 引入 js -->
    <script src="/admin/plugin/wangEditor/index.js"></script>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
	<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">



    <style>
        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }
    </style>

</head>
<body>

<div id="app">




    <el-collapse v-model="activeNames"  >
        <el-form :inline="true" :model="formInline[item.id]" v-for="(item,index) in fieldList" size="small" label-width="125px" :rules="rules[item.id]" ref="ruleForm" class="demo-form-inline">
            <el-collapse-item :title="item.group_name" :name="index"  >
                <div>
                    <el-form-item :label="field.show_name+':'" :prop="field.col_name" v-for="field in item.list" :class="field.show_name.length>7?'changeLHight':''"  >
                        <!--输入框-->
                        <el-input v-if="field.col_style == 0" :disabled="field.is_disabled" v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name" :style="'width:'+field.input_width" ></el-input>

                        <!--日期框-->
                        <el-date-picker v-if="field.col_style == 1" :disabled="field.is_disabled" value-format="yyyy-MM-dd"
                                        v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name" :style="'width:'+field.input_width"
                                        type="date" >
                        </el-date-picker>

                        <!--时分秒日期框-->
                        <el-date-picker
                                v-if="field.col_style == 5" :disabled="field.is_disabled" value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name" :style="'width:'+field.input_width"
                                type="datetime" >
                        </el-date-picker>

                        <!--下拉框-->
                        <el-select :disabled="field.is_disabled"
                                   v-if="field.col_style == 6 || field.col_style == 8" filterable :style="'width:'+field.input_width"
                                   v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name" >
                            <el-option value="" ></el-option>
                            <el-option v-for="option in field.options" :label="option.value" :value="option.key"></el-option>
                        </el-select>

                        <!--下拉框多选-->
                        <el-select :disabled="field.is_disabled" multiple
                                   v-if="field.col_style == 12 || field.col_style == 13" filterable :style="'width:'+field.input_width"
                                   v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name" >
                            <el-option value="" ></el-option>
                            <el-option v-for="option in field.options" :label="option.value" :value="option.key"></el-option>
                        </el-select>

                        <!-- 编辑器 DOM -->
                        <div v-if="field.col_style == 3" :style="'height:300px;width:'+field.input_width" >
                            <div :id="'toolbar-container-'+field.id" :style="'width:'+field.input_width" ></div>
                            <div :id="'editor-container-'+field.id" :style="'height:300px;width:'+field.input_width" ></div>
                        </div>

                        <template v-if="field.col_style == 4" >
                            <el-upload
                                    action="/admin/api/UploadController/elementUiUploadDopostFileUpload"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    multiple
                                    :data="{field:field.col_name,groupid:item.id}"
                                    :headers="headers"
                                    :file-list="uploadListShow[field.col_name]"
                                    :on-success="uploadSuccess"
                                    :on-remove="(file, fileList) => {handleRemove(file, fileList, field.col_name,field.group_id)}">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible"  >
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </template>

                        <el-input type="textarea" v-if="field.col_style == 7"
                                  :style="'width:'+field.input_width" :disabled="field.is_disabled"
                                  v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name"></el-input>

                        <template v-if="field.col_style == 9" >
                            <el-radio :disabled="field.is_disabled"
                                      :style="'width:'+field.input_width"
                                      v-model="formInline[field.group_id][field.col_name]" :label="option.key" v-for="option in field.options" >{{option.value}}</el-radio>
                        </template>

                        <el-switch v-if="field.col_style == 10" :disabled="field.is_disabled"
                                   v-model="formInline[field.group_id][field.col_name]" >
                        </el-switch>

                        <el-cascader v-if="field.col_style == 11"
                                     v-model="formInline[field.group_id][field.col_name]" :props="{ checkStrictly: true }"
                                     :options="field.options" @change="handleChange(field)" ></el-cascader>
                    </el-form-item>



                </div>
            </el-collapse-item>

            <el-form-item>
                <el-button type="primary" >保存</el-button>
            </el-form-item>

        </el-form>
    </el-collapse>






</div>

<script>
    var E = window.wangEditor; // 全局变量
</script>
<script>




    var vm = new Vue({
        el: '#app',
        data: {
            fieldList:[],
            activeNames:[],
            headers:{token:localStorage.getItem("token")},
            uploadListShow:{},

            dialogImageUrl: '',
            dialogVisible: false,
            formInline:{},
            rules:{}
        },
        created(){
            this.pageInit();
        },
        methods:{
            handleChange(field) {//三级联动下拉框改变事件 只保存最后一级
                let values = vm.formInline[field.group_id][field.col_name];
                let vstr = values[values.length-1];
                vm.formInline[field.group_id][field.col_name] = vstr;
                console.log(vm.formInline[field.group_id][field.col_name])
                return true;
            },
            pageInit(){
                post("/admin/api/FieldManagementController/enterCustomFieldQuery",{inputId:top.data.input_id,tableId:top.data.tableId},function (res){
                    vm.fieldList = res.data.fieldList;
                    let ic = Object.keys(vm.formInline).length;
                    if(Object.keys(vm.formInline).length == 0){
                        vm.formInline = res.data.formData;
                    }
                    vm.rules = res.data.roles;
                    vm.$nextTick(()=>{
                        for(let a=0;a<vm.fieldList.length;a++){
                            vm.activeNames.push(a);
                            if(ic > 0){//对当前页面图片字段进行渲染
                                let columnlist = vm.fieldList[a].list;
                                for(let i=0;i<columnlist.length;i++){
                                    if(columnlist[i].col_style == "4"){
                                        let groupid = vm.fieldList[a].id;
                                        let src = vm.formInline[groupid][columnlist[i].col_name];
                                        vm.fileListTransi(src,columnlist[i].col_name);
                                    }
                                }
                            }

                            // 创建富文本编辑器
                            let columnlist = vm.fieldList[a].list;
                            for(let i=0;i<columnlist.length;i++){
                                if(columnlist[i].col_style == "3"){
                                    // 创建编辑器1
                                    let editor1 = E.createEditor({
                                        selector: '#editor-container-'+columnlist[i].id,
                                        html:vm.formInline[vm.fieldList[a].id][columnlist[i].col_name],
                                        mode: 'default',
                                        config:{
                                            onChange(editor){//文本编辑器的改变事件
                                                const html = editor.getHtml();
                                                let groupid = vm.fieldList[a].id;
                                                vm.formInline[groupid][columnlist[i].col_name] = html;
                                            },
                                            MENU_CONF:{uploadImage:{
                                                    "server":'/admin/api/UploadController/systemDopostFileUpload',
                                                    "headers":{token:localStorage.getItem("token")},
                                                    fieldName:"file",
                                                    // 自定义插入图片
                                                    customInsert(res, insertFn) {
                                                        // res 即服务端的返回结果
                                                        console.log(res);
                                                        // 从 res 中找到 url alt href ，然后插图图片
                                                        insertFn(res.data.url, "","");
                                                    },
                                                }}

                                        }
                                    })

                                    // 创建工具栏1
                                    E.createToolbar({
                                        editor: editor1,
                                        selector: '#toolbar-container-'+columnlist[i].id,
                                        mode: 'default'
                                    })


                                }
                            }

                        }
                    })

                });
            },
            uploadSuccess(response, file, fileList){
                let groupid = response.data.groupid;
                let field = response.data.field;
                if(vm.formInline[groupid][field] == undefined || vm.formInline[groupid][field] == ""){
                    vm.formInline[groupid][field] = response.data.src;
                    // Vue.set(vm.formInline,response.data.field,response.data.src);
                }else {
                    vm.formInline[groupid][field] = vm.formInline[groupid][field]+","+response.data.src;
                    // Vue.set(vm.formInline,response.data.field,vm.formInline[response.data.field]+","+response.data.src)
                }
            },
            fileListTransi(src,field){
                if(src==null || src==undefined|| src == ""){
                    return ;
                }
                let urls = src.split(",");
                let fileList = [];
                for(let a=0;a<urls.length;a++){
                    fileList.push({name:"",url:urls[a]});
                }
                Vue.set(vm.uploadListShow,field,fileList);
            },

            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleRemove(file,fileList,field,zygl_id) {
                let urls = "";
                for(let a=0;a<fileList.length;a++){
                    console.log(fileList[a])
                    let url = fileList[a].url;
                    if(a == 0){
                        urls = url;
                    }else {
                        urls = urls+","+url;
                    }
                }
                console.log(vm.formInline);
                console.log(zygl_id);
                console.log(field);
                vm.formInline[zygl_id][field] = urls;
            },
            submitForm(formName,index) {
                try {
                    vm.$refs[formName][index].validate((valid) => {
                        if (valid) {
                            return true;
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                }catch (e){}

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        computed: {
            formInlineFun() {
                return JSON.parse(JSON.stringify(this.formInline));
            },
        },
        watch:{
            formInlineFun:{
                async handler (newValue, oldValue) {
                    let isdif = diff(newValue,oldValue);
                    if(isdif){
                        return;
                    }
                    const res = await postBody("/admin/api/DataManagementController/inputBoxChangeEvent",{tableId:top.data.tableId,mapdata:{"oldValue":oldValue,"newValue":newValue},other:{fieldList:vm.fieldList,rules:vm.rules,other:top.data.other}});
                    if(res.code == 1){
                        vm.fieldList = res.data.other.fieldList;
                        vm.formInline = res.data.mapdata.newValue;
                        vm.rules = res.data.other.rules;
                    }
                },
                deep: true
            }
        }
    })


    //验证必填项
    function verification() {
        let a = 0;
        for(let zygl in vm.formInline){
            let map = vm.formInline[zygl];
            try {
                vm.submitForm("ruleForm",a);
                a++;
            }catch (e){}
        }
        for(let zygl in vm.formInline){
            let map = vm.formInline[zygl];
            for(let key in map){
                try {
                    let value = map[key];
                    if(vm.rules[zygl][key] != undefined && value == ""){
                        top.alert("红*号必输项不能为空!");
                        return false;
                    }
                }catch (e){}
            }

        }
        return true;
    }

    function getData() {
        console.log(vm.formInline)
        return vm.formInline;
    }


    function setData(data) {
        if(Object.keys(data).length > 0){
            vm.formInline = data;
        }

    }
</script>


</body>
</html>
